<template>
  <el-card class="box-card">
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="showSaveSpu"
      >添加spu</el-button
    >
    <el-table v-loading="loading" :data="spuList" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50" />

      <el-table-column prop="spuName" label="spu名称" />
      <el-table-column prop="description" label="spu描述" />

      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-tooltip effect="dark" content="添加sku" placement="top-start">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addSku(row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="修改spu" placement="top-start">
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="editSpu(row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="查看spu列表" placement="top-start">
            <el-button type="info" icon="el-icon-info" size="mini" />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除spu" placement="top-start">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteSpu(row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 5, 7, 10]"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper, total, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { reqGetSpuList, reqDeleteSpu } from '@/api/product/spu'
import { mapState } from 'vuex'
export default {
  name: 'SpuList',
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 每页条数
      pageSize: 5,
      // 总数
      total: 0,
      loading: false,
      // spu列表
      spuList: []
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    category3Id: {
      handler() {
        this.getSpuList()
      },
      immediate: true
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSpuList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSpuList()
    },
    // 发送请求获取spu列表
    async getSpuList() {
      const { currentPage, pageSize, category3Id } = this
      this.loading = true
      const { data } = await reqGetSpuList({
        page: currentPage,
        limit: pageSize,
        category3Id
      })
      this.loading = false
      // console.log(data)
      this.spuList = data.records
      this.total = data.total
    },
    // 点击添加spu属性
    showSaveSpu() {
      console.log(111)
      this.$emit('setIsShow', 2)
    },
    // 修改spu
    editSpu(row) {
      // 切换到SaveSpu组件
      this.$emit('setIsShow', 2)
      // 将数据传递过去
      this.$emit('getSpuList', row)
    },
    // 删除spu
    async deleteSpu(row) {
      await reqDeleteSpu(row.id)
      this.$message({
        type: 'success',
        message: '删除成功'
      })
      // 更新页面
      this.getSpuList()
    },
    // 点击添加sku
    addSku(row) {
      // 当前行数据传给父组件
      this.$emit('getSpuList', row)

      // 跳转到添加sku页面
      this.$emit('setIsShow', 3)
    }
  }
}
</script>

<style></style>
